<template>
	<view class="zhengjian-container">

		<myLoading v-if="isLoading"></myLoading>
		<template v-else>

			<!-- 证件选项列表 -->
			<view class="zhengjian-list">
				<!-- 身份证 -->
				<view @click="showPopup" class="item-container" style="margin-bottom: 20rpx;">
					<view class="item-left">
						<view style="width: 3px;height:30rpx;background-color:#43556c;margin-right: 20rpx;">

						</view>
						<text class="item-title">身份证</text>
					</view>
					<view class="item-right" @click.stop="showPopup">
						<text class="update-text">去更新</text>
						<uni-icons class="icon-arrow" type="right" size="14" color="#f98242"></uni-icons>
					</view>
				</view>

				<!-- 驾驶证 -->
				<view class="item-container" @click="showPopup" style="margin-bottom: 20rpx;">
					<view class="item-left">
						<view style="width: 3px;height:30rpx;background-color:#43556c;margin-right: 20rpx;">

						</view>
						<text class="item-title">驾驶证</text>
					</view>
					<view class="item-right" @click.stop="showPopup">
						<text class="update-text">去更新</text>
						<uni-icons class="icon-arrow" type="right" size="14" color="#f98242"></uni-icons>
					</view>
				</view>



				<!-- 驾驶证 -->
				<view class="item-container" @click="showPopup">
					<view class="item-left">
						<view style="width: 3px;height:30rpx;background-color:#43556c;margin-right: 20rpx;">

						</view>
						<text class="item-title">行驶证（{{ formData.licensePlate }}）</text>
					</view>
					<view class="item-right" @click.stop="showPopup">
						<text class="update-text">去更新</text>
						<uni-icons class="icon-arrow" type="right" size="14" color="#f98242"></uni-icons>
					</view>
				</view>






			</view>

		</template>

		<!-- 自下而上的弹框 -->
		<view v-if="showBottomPopup" class="popup-mask" @click="hidePopup">
			<view class="popup-content" @click.stop>
				<view class="popup-header">
					<text class="popup-title">是否确认更新</text>
				</view>
				<view style="padding: 0 20rpx;margin-bottom: 30rpx;">
					证件资质信息每半年可更新1次当前剩余1次，如有问题请致电客服
				</view>
				<view class="popup-body">
					<view class="popup-button" @click="handleButtonClick">
						<text>确认更新</text>
					</view>


					<view class="popup-button1" @click="handleButtonClick">
						<text>暂不更新</text>
					</view>

				</view>
			</view>
		</view>

	</view>
</template>

<script>
import uniIcons from '@/uni_modules/uni-icons/components/uni-icons/uni-icons.vue'

export default {
	components: {
		uniIcons
	},
	data() {
		return {
			statusBarHeight: 0,
			formData: {
				name: '',
				phone: '',
				idCard: '',
				firstReceiveDate: '',
				avatar: '',
				licensePlate: ''
			},
			isLoading: true,
			showBottomPopup: false
		}
	},
	onLoad() {
		// 定义一个0.3-1的随机数
		let randomNum = Math.random() * 0.7 + 0.3;
		// 转换为毫秒
		let randomDelay = randomNum * 1000;
		// 延迟执行
		setTimeout(() => {
			setTimeout(() => {
				this.isLoading = false
			}, randomDelay)
		})
	},
	onShow() {
		this.loadUserData()
	},
	methods: {
		// 返回上一页
		goBack() {
			uni.navigateBack()
		},

		// 加载用户数据
		loadUserData() {
			console.log('loadUserData')
			// 这里应该从本地缓存或API获取用户数据
			const userInfo = uni.getStorageSync('userInfo')
			console.log(userInfo,'userInfo')
			if (userInfo) {
				this.formData = JSON.parse(userInfo)
			}
		},

		// 去更新证件信息
		goUpdate() {
			// 根据不同证件类型跳转到不同的更新页面
			uni.navigateTo({
				url: '/pages/loading/loading'
			})
		},
		goLoading() {
			uni.navigateTo({
				url: '/pages/loading/loading'
			})
		},

		// 弹框相关方法
		showPopup() {
			this.showBottomPopup = true;
		},
		hidePopup() {
			this.showBottomPopup = false;
		},
		handleButtonClick() {
			this.goLoading()
			this.hidePopup();
		}
	}
}
</script>

<style scoped>
.zhengjian-container {
	width: 100%;
	height: 100vh;
	background-color: #f2f2f2;
}

/* 顶部导航栏 */
.navbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 44px;
	padding: 0 16px;
	background-color: #ffffff;
	border-bottom: 1px solid #f0f0f0;
}

.nav-left {
	display: flex;
	align-items: center;
}

.close-text {
	margin-left: 6px;
	font-size: 16px;
	color: #333333;
}

.nav-title {
	font-size: 16px;
	font-weight: 500;
	color: #333333;
}

/* 证件列表 */
.zhengjian-list {
	padding-top: 10px;
}

.item-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 56px;
	padding: 0 16px;
	background-color: #ffffff;
	border-bottom: 1px solid #f0f0f0;
}

.item-left {
	display: flex;
	align-items: center;
}

.icon-id,
.icon-driver {
	margin-right: 10px;
}

.item-title {
	font-size: 16px;
	color: #333333;
}

.item-right {
	display: flex;
	align-items: center;
}

.update-text {
	font-size: 14px;
	color: #ff6b35;
	margin-right: 6px;
}

/* 自下而上弹框样式 */
.popup-mask {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	display: flex;
	align-items: flex-end;
	z-index: 999;
}

.popup-content {
	width: 100%;
	background-color: #ffffff;
	border-top-left-radius: 20rpx;
	border-top-right-radius: 20rpx;
	padding: 20rpx;
	animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
	from {
		transform: translateY(100%);
	}

	to {
		transform: translateY(0);
	}
}

.popup-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20rpx;
	margin-bottom: 20rpx;
	font-weight: 600;
	color: black;
}

.popup-title {
	font-size: 20px;

}

.popup-body {
	padding: 20rpx 0;
}

.popup-button {
	background-color: #fc6c23;
	color: #ffffff;
	padding: 20rpx;
	border-radius: 10rpx;
	text-align: center;
	font-size: 16px;
	margin-bottom: 20rpx;
}

.popup-button1 {
	background-color: #465069;
	color: #ffffff;
	padding: 20rpx;
	border-radius: 10rpx;
	text-align: center;
	font-size: 16px;
	margin-bottom: 20rpx;
}

.popup-button:active {
	background-color: #0056b3;
}
</style>
